<!--vue模板-->
<template>
  <div style="background-color: #fff">
    <!--咨询信息-->
    <div class="tip">报价信息</div>
    <el-row>
      <el-col
        :span="3"
        style="text-align: right; line-height: 40px; padding-right: 10px"
        >询价客户:</el-col
      >
      <el-col :span="6">
        <el-select
          v-model="data.customerName"
          :disabled="isShow"
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option
            v-for="item in customerOptions"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
      </el-col>
      <el-col
        :span="3"
        :offest="2"
        style="
          text-align: right;
          height: 40px;
          line-height: 40px;
          padding-right: 10px;
        "
        >询价日期:
      </el-col>
      <el-col :span="6">
        <el-date-picker
          v-model="data.enquiryDate"
          type="date"
          placeholder="Pick a Date"
          format="YYYY/MM/DD"
          value-format="YYYY-MM-DD"
        />
      </el-col>
    </el-row>

    <el-row>
      <el-col
        :span="3"
        style="
          text-align: right;
          height: 40px;
          line-height: 40px;
          padding-right: 10px;
        "
        >机器品牌:</el-col
      >
      <el-col :span="6">
        <el-select
          v-model="data.brand"
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option
            v-for="item in dictOptions"
            :key="item.id"
            :label="item.dictName"
            :value="item.dictName"
          />
        </el-select>
      </el-col>
      <el-col
        :span="3"
        style="
          text-align: right;
          height: 40px;
          line-height: 40px;
          padding-right: 10px;
        "
        >产品类型:</el-col
      >
      <el-col :span="6">
        <el-select
          v-model="data.categoryId"
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option label="产品询价" :value="1" />
          <el-option label="筛网询价" :value="2" />
          <el-option label="托辊询价" :value="3" />
        </el-select>
      </el-col>
    </el-row>
    <el-row>
      <el-col
        :span="3"
        style="
          text-align: right;
          height: 40px;
          line-height: 40px;
          padding-right: 10px;
        "
        >公司是否做过:</el-col
      >
      <el-col :span="6">
        <el-select v-model="data.isDo" placeholder="请选择" style="width: 100%">
          <el-option label="做过" :value="1" />
          <el-option label="没做过" :value="2" />
        </el-select>
      </el-col>
    </el-row>

    <div class="tip">产品信息</div>
    <el-table :data="data.product" style="width: 100%">
      <el-table-column label="产品图片" width="180">
        <template #default="{ row }">
          <img :src="path + row.picurl" />
        </template>
      </el-table-column>

      <el-table-column prop="productName" label="产品名称" />
      <el-table-column prop="spec" label="产品型号" width="180" />
      <el-table-column prop="price" label="产品价格" width="180" />
      <el-table-column prop="num" label="需求数量" width="180">
        <template #default="{ row }">
          <el-input-number v-model="row.num" :min="0" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="{ row }">
          <el-button type="primary" @click="toHistory(row.id)"
            >历史报价</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="add">添加产品</el-button>

    <el-button type="primary" @click="save">保存</el-button>

    <!--选择产品-->
    <ChooseProduct
      ref="chooseProductRef"
      :visible="isShowChooseProduct"
      @close="isShowChooseProduct = false"
      @choose="chooseProduct"
    />
  </div>
</template>

<!--vue 组件选项定义-->
<script setup>
import { ref, onBeforeMount } from "vue";
import ChooseProduct from "@/views/product/ChooseProduct.vue";
import { getUser } from "@/utils/session.js";
import { useRoute, useRouter } from "vue-router";
import { queryByType } from "@/api/system/dict.js";
import { queryEnquiryById } from "@/api/enquiry/enquiry.js";
import { getCustomerList } from "@/api/customer/customer.js";
import { saveProductEnquiry } from "@/api/productEnquiry/productEnquiry.js";
import { ElMessage } from "element-plus";

//获取路由实例
const route = useRoute();

//跳转页面路由
const router = useRouter();

//是否显示选择产品
const isShowChooseProduct = ref(false);
const chooseProductRef = ref(null);
//
const dictOptions = ref([]);
const dictSpecOptions = ref([]);

//表格数据
const data = ref({
  id: "",
  cid: "",
  customerName: "",
  enquiryDate: "",
  brand: "",
  spec: "",
  isDo: "",
  categoryId: "",
  categoryName: "",
  product: []
});
//用户下拉列表
const customerOptions = ref([]);

//定义访问路径
const path = "http://localhost:8080";

//添加产品
function add() {
  isShowChooseProduct.value = true;
  chooseProductRef.value.clear();
}

//给产品分类赋值
function categoryChg(selectedValue) {
  const selectedNode = dictCategoryOptions.value.find(
    node => node.dictName === selectedValue
  );
  if (selectedNode) {
    data.value.categoryId = selectedNode.id;
  }
}

//判断是否有客户id
const isShow = ref(false);

//--选择产品--
function chooseProduct(rows) {
  //遍历选择的产品 追加上去
  rows.forEach(el => {
    //遍历data.value.product  查看要添加的产品是否存在
    let flag = false; //默认不存在
    for (let i = 0, len = data.value.product.length; i < len; i++) {
      let p = data.value.product[i];
      if (el.id == p.id) {
        flag = true;
        break;
      }
    }
    if (!flag) {
      let tmp = {};
      tmp.num = 0;
      tmp.picurl = el.picurl;
      tmp.pid = el.id;
      tmp.price = el.price;
      tmp.productName = el.name;
      tmp.spec = el.spec;
      data.value.product.push(tmp);
    }
  });
}
//保存产品
async function save() {
  if (data.value.product.length == 0) {
    ElMessage.warning("请选择产品");
  }
  //从登录信息中获取
  let user = getUser();
  data.value.saleId = user.id;
  console.log(">>>", data.value);
  let res = await saveProductEnquiry(data.value);
  if (res.code == 200) {
    ElMessage.success("保存成功");
    router.push({ path: "/productEnquiry/productEnquiryList" });
  }
}

//页面加载时选择加载的数据
async function init() {
  let res = null;
  if (route.query.id != undefined) {
    isShow.value = true;
    res = await queryEnquiryById(route.query.id);
    if (res.code == 200) data.value = res.data;
    console.log(data.value, "edssdddddddddddddddddd");
  } else {
    isShow.value = false;
    res = await getCustomerList();
    if (res.code == 200) {
      customerOptions.value = res.data;
    }
  }
  res = await queryByType("brand");
  if (res.code == 200) dictOptions.value = res.data;
  res = await queryByType("spec");
  if (res.code == 200) dictSpecOptions.value = res.data;
}

//钩子函数
onBeforeMount(() => {
  init();
});
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
.tip {
  background-color: #eee;
  border: solid 1px #ddd;
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  margin: 30px 0;
}
</style>
